<template>
    <div v-if="zhengroleList[0]" style="display: flex;">
        <div class="box">
            <div class="head body">
            </div>
            <div class="head body">订单量</div>
            <div class="body head">应收</div>
            <div class="body head">成交价</div>
            <div class="body head">客户数</div>
            <div class="body head">新客户数量</div>
        </div>

        <div class="box" v-for="(item, index) in zhengroleList[0].attributeList" :key="index">
            <div class="head body">{{ item }}
            </div>
            <template v-if="zhengroleList[0][item]">
                <div class="body">{{ zhengroleList[0][item].orderCount }}</div>
                <div class="body">{{ zhengroleList[0][item].billReceivable }}</div>
                <div class="body">{{ zhengroleList[0][item].transactionPrice }}</div>
                <div class="body">{{ zhengroleList[0][item].customerCount }}</div>
                <div class="body">{{ zhengroleList[0][item].newCustomerCount }}</div>
            </template>


        </div>
    </div>

</template>

<script>
export default {

    props: ['zhengroleList'],
    data() {
        return {
            attributeList: [
                "12", 13
            ],
            datas: {
                "12": {
                    "orderCount": "0",
                    "billReceivable": "0",
                    "transactionPrice": "0",
                    "customerCount": "0",
                    newCustomerCount:''
                },
                "13": {
                    "orderCount": "0",
                    "billReceivable": "0",
                    "transactionPrice": "0",
                    "customerCount": "0",
                    newCustomerCount:''
                },
                "totalBillReceivable": 15450.00,
                "outstandingAmount": 925.00,
                "totalTeacherTotalPrice": 1210.00,
                "totalCustomerRefundAmount": 34746.00,
                "totalCustomerRefundableAmount": 2557.00,
                "attributeList": [
                    "12"
                ],
                "customerNickname": 4,
                "totalTransactionPrice": 15450.00,
                "totalOfficialReceipts": 10511.32
            }
            ,

            list: ['orderCount', 'billReceivable', 'transactionPrice', 'customerCount','newCustomerCount'],
            columnList: [
                {
                    prop: "expected",
                    label: "预期值",
                },
                {
                    prop: "accuracy",
                    label: "训练值",
                },
                {
                    prop: "test",
                    label: "检验值",
                },
            ],

        }
    }, mounted() {
    
    }

}
</script>

<style lang="scss" scoped>
.box {
    font-size: 14px;
    color: #606266;
    width: 80px;

    &:last-of-type {
        border-right: 1px solid #dfe6ec;
    }

    &:first-of-type {
        border-right: 1px solid #dfe6ec;
    }
}

.body {
    line-height: 40px;
    height: 40px;
    padding: 5px;
    border-bottom: 1px solid #dfe6ec;

}

.head {
    background-color: #f8f8f9;
    font-size: 13px;
    font-weight: 700;
}

:v-deep .el-table th {
    overflow: initial;
}

:v-deep.el-table th>.cell {
    font-family: PingFangSC-Regular, sans-serif;
    font-size: 14px;
    color: #2e3444;
}

:v-deep .el-table thead tr:first-of-type th:first-of-type,
:v-deep .el-table thead tr:nth-of-type(2) th:first-of-type {
    border-bottom: none;
    padding: 0;
}

:v-deep .el-table thead tr:last-of-type th:first-of-type:before {
    content: "";
    position: absolute;
    width: 1px;
    background-color: #ebeef5;
    display: block;
}

:v-deep .el-table thead tr:last-of-type th:first-of-type:before {
    height: 183px; //根据情况调整
    bottom: 0;
    right: 0; //根据情况调整
    transform: rotate(-72deg); //根据情况调整
    transform-origin: bottom;
}

:v-deep .el-table tbody tr td:first-of-type .cell {
    font-family: PingFangSC-Regular, sans-serif;
    font-size: 14px;
    color: #2e3444;
    font-weight: 600;
    text-align: center;
}
</style>
